<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Bootstrap contributors">
<title>Sign up</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/sign-in/">
<link href="../static/plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../static/css/sign-up.css" rel="stylesheet">
<style>
body {
background-color: #f7fafc; /* 浅色背景 */
font-family: 'Arial', sans-serif;
}
.form-signin {
max-width: 400px; /* 最大宽度 */
padding: 20px;
margin: auto;
background-color: #fff; /* 白色背景 */
border-radius: 8px; /* 圆角 */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
.form-signin h1 {
font-size: 26px; /* 标题大小 */
margin-bottom: 20px;
color: #333; /* 标题颜色 */
}
.form-floating label {
color: #555; /* 标签颜色 */
}
.form-control:focus {
border-color: green; /* 输入框聚焦时边框颜色 */
box-shadow: 0 0 5px rgba(0, 255, 0, 0.5); /* 输入框阴影 */
}
.btn-primary {
background-color: green; /* 按钮颜色 */
border-color: green; /* 边框颜色 */
}
.btn-primary:hover {
background-color: darkgreen; /* 悬停时颜色 */
border-color: darkgreen;
}
.btn-secondary {
background-color: #6c757d; /* 辅助按钮颜色 */
border-color: #6c757d; /* 边框颜色 */
}
.btn-secondary:hover {
background-color: #5a6268; /* 辅助按钮悬停颜色 */
border-color: #545b62;
}
.text-muted {
color: #888; /* 版权文本颜色 */
}
</style>
</head>
<body class="text-center">
<div class="d-flex align-items-center vh-100 bg-light">
<main class="form-signin w-75 mx-auto p-4 bg-white shadow rounded">
<form method="POST" action="{% url 'upload_signin_info' %}" id="signupForm">
{% csrf_token %}
<img class="mb-4 d-block mx-auto" src="../static/img/bjfu.png" alt="Beijing Forestry University" width="252" height="61">
<h1 class="h3 mb-3 fw-normal">Please sign up</h1>

<!-- 错误信息显示区域 -->
{% if error_message %}
<div class="alert alert-danger" role="alert">
{{ error_message }}
</div>
{% endif %}

<!-- 成功信息显示区域 -->
{% if success_message %}
<div class="alert alert-success" role="alert">
{{ success_message }}
</div>
{% endif %}

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" name="email" required>
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password" name="password" required>
<label for="floatingPassword">Password</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="floatingConfirmPassword" placeholder="Confirm Password" name="confirm_password" required>
<label for="floatingConfirmPassword">Confirm Password</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="floatingRealName" placeholder="Real Name" name="real_name" required>
<label for="floatingRealName">Real Name</label>
</div>
<div class="form-floating mb-3">
<select name="identity" class="form-select" id="floatingSelect" aria-label="Floating label select example" required>
<option selected disabled>请选择身份</option>
<option value="1">考生</option>
<option value="2">导师</option>
<option value="3">学科秘书</option>
<option value="4">研究生管理秘书</option>
<option value="5">学科负责人</option>
<option value="6">监督成员</option>
<option value="7">研究生主管领导</option>
<option value="8">复试组</option>
</select>
<label for="floatingSelect">身份</label>
<div class="form-floating mb-3 d-flex align-items-center">
    <img src="{% url 'captcha_image' %}" id="captchaImage" alt="Captcha" style="width: 100px; height: 40px; margin-right: 10px;" />
    <input type="text" id="captchaInput" name="captchaInput" class="form-control" placeholder="请输入验证码" required>
</div>
</div>
<div class="d-grid gap-2">
<a href="{% url 'login' %}" class="btn btn-secondary">已有账号？去登录</a>
<button class="btn btn-primary" type="submit">Sign up</button>
</div>
</form>
</main>
</div>
<p class="mt-5 mb-3 text-muted text-center">&copy; 2024–2036</p>
<script>
document.getElementById('signupForm').addEventListener('submit', function(event) {
const password = document.getElementById('floatingPassword').value;
const confirmPassword = document.getElementById('floatingConfirmPassword').value;

if (password !== confirmPassword) {
event.preventDefault(); // 阻止表单提交
alert('Passwords do not match. Please try again.');
}
});

    document.getElementById('signupForm').addEventListener('submit', function(event) {
        const password = document.getElementById('floatingPassword').value;
        const confirmPassword = document.getElementById('floatingConfirmPassword').value;
        const captchaInput = document.getElementById('captchaInput').value;
    
        if (password !== confirmPassword) {
            event.preventDefault(); // 阻止表单提交
            alert('Passwords do not match. Please try again.');
            return;
        }
    
        // 验证验证码
        const captchaValid = await validateCaptcha(captchaInput);
        if (!captchaValid) {
            event.preventDefault();
            alert('验证码错误，请重新输入。');
            return;
        }
    });

</script>
</body>
</html>